<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>aliyunOSS视频点播上传插件</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="../../../layui/css/layui.css" media="all">
	</head>
	<style>
		.layui-layout-admin {
			margin: 20px;
		}
	</style>
	<body>
		<div class="layui-layout layui-layout-admin">

			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
				<legend>视频点播上传</legend>
			</fieldset>
			<div class="layui-upload">
				<div>
					<button type="button" class="layui-btn" id="test1">视频点播上传</button>
				</div>

				<div class="layui-upload-list">
					<video  id="demo1" controls="controls"></video>
					<p id="demoText"></p>
				</div>
			</div>

			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
				<legend>上传多张图片</legend>
			</fieldset>

			<div class="layui-upload">
				<button type="button" class="layui-btn" id="test2">多图片上传</button>
				<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
					预览图：
					<div class="layui-upload-list" id="demo2"></div>
				</blockquote>
			</div>

			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
				<legend>上传音频</legend>
			</fieldset>
			<div class="layui-upload">
				<button type="button" class="layui-btn" id="test3">上传音频</button>
				<div class="layui-upload-list">
					<audio  id="demo3" controls="controls"></audio>
				</div>
			</div>

		</div>

		<script src="../../../layui/layui.js"></script>
		<!-- <script src="../aliyun-upload-sdk/jquery-3.6.0.min.js"></script> -->
<!-- 		<script src="../aliyun-upload-sdk/aliyun-upload-sdk-1.5.2.min.js"></script>
		<script src="../aliyun-upload-sdk/lib/es6-promise.min.js"></script>
		<script src="../aliyun-upload-sdk/lib/aliyun-oss-sdk-6.13.0.min.js"></script> -->
		<script>
			layui.config({
				base: '../../../layui_exts/' //配置 layui 第三方扩展组件存放的基础目录
			}).extend({
				aliyunVod: 'aliyunVod/aliyunVod'
			}).use(['aliyunVod'], function() {
				var aliyunVod = layui.aliyunVod;
				var $ = layui.$;

				//创建一个实例
				var policyUrl =
					'http://localhost:3000/vod/getUploadAuth?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYxMDUxNmZkMTIzNzQ2NzM3MDBkOWExOSIsImlhdCI6MTYyODY0NjA3NywiZXhwIjoxNjI4NzMyNDc3fQ.Nh1rtQPK4YKMzCKz5xWUcH-CoYDaQQzc4-nJe5Hcmi0';
					var playAuthUrl = 'http://localhost:3000/vod/getPlayAuth?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYxMDUxNmZkMTIzNzQ2NzM3MDBkOWExOSIsImlhdCI6MTYyODY0NjA3NywiZXhwIjoxNjI4NzMyNDc3fQ.Nh1rtQPK4YKMzCKz5xWUcH-CoYDaQQzc4-nJe5Hcmi0'
					var refreshAuth = 'http://localhost:3000/vod/refreshUploadAuth?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYxMDUxNmZkMTIzNzQ2NzM3MDBkOWExOSIsImlhdCI6MTYyODY0NjA3NywiZXhwIjoxNjI4NzMyNDc3fQ.Nh1rtQPK4YKMzCKz5xWUcH-CoYDaQQzc4-nJe5Hcmi0';
				//单文件上传
				aliyunVod.render({
					elem: '#test1',
					multiple: false, //是否多文件上传
					fileType: 'video', //上传类型
					//fileSuffix: 'png', //文件后缀，不填或空则是不限制
					prefixPath: 'video/test', //上传路径

					policyUrl: policyUrl, //签名地址
					playAuthUrl:playAuthUrl,
					refreshAuth:refreshAuth,
					method: 'POST', //签名及上传方式
					success: function(res) {
						console.log(res);
						$('#demo1').attr('src', res.data.authUrl); //图片链接（base64）
					},
					fail: function(e) {

					},
					allDone: function(e) {
						console.log('全部上传')

					}
				});

				aliyunVod.render({
					elem: '.test',
					multiple: false, //是否多文件上传
					fileType: 'images', //上传类型
					//fileSuffix: 'png', //文件后缀，不填或空则是不限制
					prefixPath: 'images', //上传路径

					policyUrl: policyUrl, //签名地址
					method: 'POST', //签名及上传方式
					success: function(res) {
						console.log(this.item);
						$($(this.item).parent()[0]).next()[0].outerHTML =
							'<img class="layui-upload-img" src="' + res.data.url + '">'
						console.log('this', $(this.elemEvent[0]))
						console.log('this', $($(this.elemEvent[0]).parent()[0]).next())
					},
					fail: function(e) {

					},
					allDone: function(e) {

					}
				});

				//多图片上传
				var imagesArray = [];
				var aliyunOSS2 = aliyunVod.render({
					elem: '#test2',
					multiple: true, //是否多文件上传
					fileType: 'images', //上传类型
					fileSuffix: '', //文件后缀，不填或空则是不限制
					prefixPath: 'images/test', //上传路径
					policyUrl: policyUrl, //签名地址
					method: 'POST', //签名及上传方式
					number: 3, //一次性可上传个数
					success: function(result) {
						console.log(result);
						//$('#demo1').attr('src', res.data.url); //图片链接（base64）
						$('#demo2').append('<img src="' + result.data.authURL + '"  class="layui-upload-img">')
						imagesArray.push(result);

					},
					allDone: function(result) {
						console.log('全部上传成功', result);
						aliyunOSS2.reload({
							number: 3 - imagesArray.length
						})
					},
					fail: function(e) {

					}
				});

				//上传音频示例
				aliyunVod.render({
					elem: '#test3',
					multiple: false, //是否多文件上传
					fileType: 'audio', //上传类型
					//fileSuffix: 'png', //文件后缀，不填或空则是不限制
					prefixPath: 'audio', //上传路径
					number: 3,
					policyUrl: policyUrl, //签名地址
					playAuthUrl:playAuthUrl,//播放鉴权地址 -- 音视频需要
					refreshAuth:refreshAuth,
					method: 'POST', //签名及上传方式
					success: function(res) {
						console.log(res);
						$('#demo3').attr('src', res.data.authUrl); //图片链接（base64）
					},
					fail: function(e) {

					}
				});

				//动态渲染组件
				aliyunVod.render({
					elem: '#test4',
					multiple: false, //是否多文件上传
					fileType: 'images', //上传类型
					//fileSuffix: 'png', //文件后缀，不填或空则是不限制
					prefixPath: 'images', //上传路径

					policyUrl: policyUrl, //签名地址
					method: 'POST', //签名及上传方式
					success: function(res) {
						console.log(this.item);
						$($(this.item).parent()[0]).next()[0].outerHTML =
							'<img class="layui-upload-img" src="' + res.data.url + '">'

						var t = new Date().getTime();
						$('body').append('<div class="layui-upload">' +
							'<div>' +
							'<button type="button" class="layui-btn test t-' + t +
							'" >单文件上传新增</button>' +
							'</div>' +
							'<div class="layui-upload-list">' +
							'<img class="layui-upload-img">' +
							'<p id="demoText"></p>' +
							'</div>' +
							'</div>');
						console.log(testOSS)
						aliyunVod.render({
							elem: '.t-' + t,
							multiple: false, //是否多文件上传
							fileType: 'images', //上传类型
							//fileSuffix: 'png', //文件后缀，不填或空则是不限制
							prefixPath: 'images', //上传路径

							policyUrl: policyUrl, //签名地址
							method: 'POST', //签名及上传方式
							success: function(res) {
								console.log(this.item);
								$($(this.item).parent()[0]).next()[0].outerHTML =
									'<img class="layui-upload-img" src="' + res.data.url + '">'
								console.log('this', $(this.elemEvent[0]))
								console.log('this', $($(this.elemEvent[0]).parent()[0]).next())
							},
							fail: function(e) {

							},
							allDone: function(e) {

							}
						});

					},
					fail: function(e) {

					},
					allDone: function(e) {

					}
				});


		// 		var uploader = new AliyunUpload.Vod({
		// 			//userID，必填，只需有值即可。
		// 			userId: "122",
		// 			//分片大小默认1 MB，不能小于100 KB
		// 			partSize: 1048576,
		// 			//并行上传分片个数，默认5
		// 			parallel: 5,
		// 			//网络原因失败时，重新上传次数，默认为3
		// 			retryCount: 3,
		// 			//网络原因失败时，重新上传间隔时间，默认为2秒
		// 			retryDuration: 2,
		// 			//是否上报上传日志到视频点播，默认为true
		// 			enableUploadProgress: false,
		// 			// 添加文件成功
		// 			addFileSuccess: function(uploadInfo) {
		// 				console.log('addFileSuccess',uploadInfo)
		
		// 			},
		// 			//开始上传
		// 			'onUploadstarted': function(uploadInfo) {
		// 				console.log('uploadInfo', uploadInfo)
		// 				console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo
		// 					.endpoint +
		// 					", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
		// 				//上传方式1，需要根据uploadInfo.videoId是否有值，调用视频点播的不同接口获取uploadauth和uploadAddress，如果videoId有值，调用刷新视频上传凭证接口，否则调用创建视频上传凭证接口
		// 				if (uploadInfo.videoId) {
		// 					//如果uploadInfo.videoId存在，调用刷新视频上传凭证接口
		// 				} else {
		// 					//如果uploadInfo.videoId不存在，调用获取视频上传地址和凭证接口
		// 					//从视频点播服务获取的uploadAuth、uploadAddress和videoId，设置到SDK里
		// 					$.ajax({
		// 						url: policyUrl,
		// 						//processData: false,
		// 						//cache: false,
		// 						//contentType: false,
		// 						type: 'Post',
		// 						data: {
		// 							fileName: uploadInfo.file.name,
		// 							title: uploadInfo.userData
		// 						},
		// 						//async: false,
		// 						success: function(res) {
		// 							console.log(res)
		// 							uploader.setUploadAuthAndAddress(uploadInfo, res.data
		// 								.UploadAuth, res.data.UploadAddress, res.data.VideoId
		// 							);
		// 						},
		// 						error: function() {

		// 						},
		// 					})


		// 				}
		// 			},
		// 			//文件上传成功
		// 			'onUploadSucceed': function(uploadInfo) {
		// 				console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo
		// 					.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object
		// 				);
		// 			},
		// 			//文件上传失败
		// 			'onUploadFailed': function(uploadInfo, code, message) {
		// 				console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code +
		// 					", message:" +
		// 					message);
		// 			},
		// 			//文件上传进度，单位：字节
		// 			'onUploadProgress': function(uploadInfo, totalSize, loadedPercent) {
		// 				console.log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" +
		// 					totalSize +
		// 					", percent:" + Math.ceil(loadedPercent * 100) + "%");
		// 			},
		// 			//上传凭证超时
		// 			'onUploadTokenExpired': function(uploadInfo) {
		// 				console.log("onUploadTokenExpired");
		// 				//实现时，根据uploadInfo.videoId调用刷新视频上传凭证接口重新获取UploadAuth
		// 				//从点播服务刷新的uploadAuth，设置到SDK里

		// 				uploader.resumeUploadWithAuth(uploadAuth);
		// 			},
		// 			//全部文件上传结束
		// 			'onUploadEnd': function(uploadInfo) {
		// 				console.log("onUploadEnd: uploaded all the files");
		// 			}
		// 		});

				// document.getElementById("files").addEventListener('change', function(event) {
				// 	console.log(event)
				// 	for (var i = 0; i < event.target.files.length; i++) {
				// 		//逻辑代码
				// 		var paramData = '{"Vod":{}}';
				// 		uploader.addFile(event.target.files[i], null, null, null, paramData);

				// 	}
				// });

				// document.getElementById("upload").addEventListener('click', function(event) {
				// 	uploader.startUpload();
				// })
			});
		</script>
	</body>
</html>
